<template>
  <div>
    <div id="mountNode"></div>

    <vxe-table class="mt-1" :data="flowList">
      <vxe-table-column width="50px" type="seq"></vxe-table-column>
      <vxe-table-column
        min-width="80px"
        field="stepName"
        title="步骤"
      ></vxe-table-column>

      <vxe-table-column
        min-width="80px"
        field="creatorName"
        title="发送人"
      ></vxe-table-column>

      <vxe-table-column
        min-width="80px"
        field="creationTime"
        title="接收时间"
        :formatter="formatDateTime"
      ></vxe-table-column>
      <vxe-table-column
        min-width="80px"
        field="auditorName"
        title="处理人"
      ></vxe-table-column>

      <vxe-table-column
        min-width="80px"
        field="completeTime"
        title="完成时间"
        :formatter="formatDateTime"
      ></vxe-table-column>

      <vxe-table-column min-width="80px" title="状态">
        <template v-slot="{ row }">
          <span v-if="row.state === 0" class="red">● 未处理</span>
          <span v-else-if="row.state === -1" class="red">● 等待中</span>
          <span v-else-if="row.state === 1" class="info">● 处理中</span>
          <span v-else-if="row.state === 2" class="green">● 已完成</span>
        </template>
      </vxe-table-column>
      <vxe-table-column
        min-width="80px"
        field="comments"
        title="意见"
      ></vxe-table-column>
      <!-- <vxe-table-column min-width="80px" field="note" title="备注"> </vxe-table-column> -->
    </vxe-table>
  </div>
</template>

<script>
  import { Get } from '@/api/flow/api'
  import { Gettasklist } from '@/api/flowtask/api'
  import { formatDateTime } from '@/utils/public/tableformat'

  export default {
    data() {
      return {
        flowList: [],
      }
    },
    props: {
      taskId: {
        type: String,
        default: '',
      },
      flowId: {
        type: String,
        default: '',
      },
      groupId: {
        type: String,
        default: '',
      },
    },
    mounted() {
      var that = this
      const width = document.getElementById('mountNode').getBoundingClientRect()
        .width

      Get({ id: this.flowId }).then((res) => {
        var flowdata = JSON.parse(res.content.designerJSON)
        const graph = new this.G6.Graph({
          container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
          // 画布宽高
          width: width,
          height: 200,
          fitView: true,
        })
        // 读取数据
        graph.data(flowdata.g6data)
        // 渲染图
        graph.render()
      })

      Gettasklist({ groupId: that.groupId }).then((res) => {
        if (res.isSuccess) {
          that.flowList = res.content
        }
      })
    },
    methods: {
      formatDateTime,
    },
  }
</script>

<style scoped></style>
